<template>
  <div class="online-edit-form">
    <van-nav-bar class="header"
      :title="form.formName"
      left-arrow
      @click-left="onBack()"
    />
    <van-form class="form-box"
      :label-width="(form.labelWidth || 100) + 'px'"
    >
      <van-custom-block
        :gutter="0"
        :widgetList="getFormWidgetList"
      />
    </van-form>
    <van-row class="menu-box" type="flex">
      <van-button class="btn-cancel" type="default" size="small" style="margin-right: 10px">取消</van-button>
      <van-button class="btn-save" type="primary" size="small" color="#FF7700">保存</van-button>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'online-edit-form',
  props: {
    formConfig: {
      type: Object
    }
  },
  data () {
    return {
      form: {
        formName: '测试'
      }
    }
  },
  methods: {
    onBack () {

    }
  },
  computed: {
    getFormWidgetList () {
      return [];
    }
  }
}
</script>

<style scoped>
  .online-edit-form {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #F6F7F9;
  }
  .header {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
  }
  .form-box {
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    height: 100px;
  }
  .menu-box {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    padding: 16px;
    flex-wrap: nowrap;
    background: white;
    box-sizing: border-box;
  }
  .btn-cancel {
    width: 105px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .btn-save {
    width: 100px;
    flex-grow: 1;
    flex-shrink: 1;
  }
</style>
